<template>
<!-- 月嫂服务 -->
<div>
  <div class="submit-box head-line">
    <AddressCard :addr="addressData" />
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">预产期</view>
        </view>
        <view class="weui-cell__bd">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            @change="dateChange"
          >
            <view class="weui-select text-right">{{date}}</view>
          </picker>
        </view>
      </view>
    </div>

    <div class="card-shadow">
      <div class="weui-cell area-box">
        <view class="weui-cell__hd">
          <view class="weui-label">服务时长</view>
        </view>
        <view class="weui-cell__bd">
          <input maxlength="50" class="flex-box" name="area" v-model="serviceDuration" type="number" placeholder="输入需要服务的天数">
        </view>
        <div class="weui-cell__ft">
          <i>天</i>
        </div>
      </div>
    </div>
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">胎儿类型</view>
        </view>
        <view class="weui-cell__bd">
          <picker :value="fetusIndex" :range="fetusRange" @change="fetusChange">
            <view class="weui-select text-right">{{fetusRange[fetusIndex] || '请选择'}}</view>
          </picker>
        </view>
      </view>
    </div>

  </div>
  <div class="btn-box-fixed flex-box">
    <div class="total-box flex-1">合计：<i class="total-price inline">￥{{orderPrice}}</i><p class="muted inline">起</p></div>
    <button class="btn-full" :loading="isSubmit" @tap="submit">提交预约</button>
  </div>
</div>
</template>
<script>
import dateUtil from '@/utils/dateUtil'
import AddressCard from '@/components/AddressCard/index'
import saveOrder from '@/interface/order/saveOrder'
import getServicePrice from '@/interface/getServicePrice'
import getAddressList from '@/interface/address/getAddressList'
import {rangeData, serviceTypeData} from '@/config'

export default {
  components: { AddressCard },
  data () {
    const today = dateUtil.format(new Date(), 'yyyy-MM-dd')
    return {
      isSubmit: false,
      addressData: {},
      startDate: today,
      date: today,
      serviceDuration: '',
      fetusIndex: 0, // 胎儿
      fetusRange: rangeData.fetusType,
      orderPrice: ''
    }
  },
  computed: {},
  methods: {
    hadAddress () {
      const addr = this.addressData || {}
      return addr.custName && addr.areaCode && addr.phone
    },
    dateChange (e) {
      this.date = e.mp.detail.value
    },
    fetusChange (e) {
      this.fetusIndex = e.mp.detail.value
    },
    submit () {
      if (!this.hadAddress()) {
        this.dialog.showToast('请先填写地址')
        return
      }
      if (!this.serviceDuration) {
        this.dialog.showToast('请填写服务时长')
        return
      }
      this.isSubmit = true
      saveOrder({
        addressId: this.addressData.id,
        serviceType: serviceTypeData.ys,
        serviceDate: this.date,
        serviceDuration: this.serviceDuration,
        fetusType: this.fetusIndex,
        orderPrice: this.orderPrice
      }).then(v => {
        this.goStatusPage('success')
      })
    },
    getPrice () {
      getServicePrice().then(data => {
        this.orderPrice = data.matronPrice
      })
    }
  },
  beforeMount () {
    if (!this.cookie.isLogin()) {
      wx.navigateTo({ url: '/pages/login/main' })
    }
  },
  onShow () {
    const {store} = this.globalData
    if (store.selectAddr) {
      this.addressData = store.selectAddr
      this.globalData.store.selectAddr = null
    }
  },
  mounted () {
    getAddressList({isDefault: true}).then(data => {
      this.addressData = data || {}
    })
    this.getPrice()
  }
}
</script>
<style lang="less">
page {
  background-color: #f9f9f9;
}
.weui-cell__ft{
  padding-right: 10px;
}
</style>